<template>
    <div class="kfHumanUpFile">
        <van-nav-bar
                title="上传合同"
                left-text="返回"
                left-arrow
                border
                fixed
                @click-left="$router.go(-1)"
        />
        <div style="height:50px"></div>
        <van-cell-group>
            <van-field
                    v-model="name"
                    label="人员姓名"
                    placeholder=""
                    size="large"
                    required
                    readonly
            />
        </van-cell-group>
        <div class="flex-wrap" v-if="button1">
            <div class="left"><span style="color: red">*</span>上传合同</div>
            <van-uploader :after-read="uploadSuccess" accept="*"> <!--:name="index"-->
                <van-button icon="upgrade" size="small" :color="isFile == '' ? '#7232dd':'#999'" type="primary">
                    {{isFile == '' ? '未上传合同':'已上传合同'}}
                </van-button>
            </van-uploader>
            <div class="toast-text">{{fileName}}</div>
            <!--            <div class="right">-->
            <!--                <van-uploader upload-text="" v-model="fileList" :after-read="afterRead" :max-count="1">-->
            <!--                    <div class="select-btn">选择文件</div>-->
            <!--                </van-uploader>-->
            <!--            </div>-->

        </div>
        <div class="foot-btn">
            <div class="blue-btn" @click="saveFile()">保存</div>
            <div class="red-btn" @click="$router.go(-1)">取消</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "kfHumanUpFile",
        data() {
            return {
                name: '',
                fileList: [],
                fileName: '',
                isFile: false,
                fileCode: '',
                qiniuToken: '',
                goodsId: '',
                button1:false,
            };
        },
        methods: {
            getQiniuToken() {
                this.$post("/api/qiniu/up_token", {})
                    .then(res => {
                        this.qiniuToken = res
                    })
                    .catch(err => {
                    });
            },

            // 文件上传
            uploadSuccess(file, index) {
                if (file) {
                    this.isFile = true
                    this.fileName = file.file.name
                }
                let {name} = index
                this.$Toast.loading({
                    message: '上传中',
                    duration: 0,
                    forbidClick: true
                });
                this.$QiniuUpload(this.qiniuToken, file)
                    .then(res => {
                        this.$Toast.clear();
                        this.fileCode = this.qiniuToken.domain + res.key
                    })
                    .catch(err => {
                        this.$Toast.clear();
                    });

            },
            saveFile() {
                let data = {
                    token: localStorage.getItem('token'),
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    member_goods_id: this.$route.query.goodsId,
                    id: this.$route.query.id,
                    contract: this.fileCode
                }
                this.$post("/api/order_roster/up_contract", data)
                    .then(res => {
                        if (res.code == 1) {
                            this.$Toast('保存成功')
                            this.$router.go(-1)
                        } else {
                            this.$Toast(res.msg)
                        }
                    }).catch(err => {
                });
            },
        },
        watch: {},
        created() {
            this.button1 = this.$queryMenu('Customer/hr_contract')
            this.name = this.$route.query.name
            this.getQiniuToken();

        },
        beforeCreate() {
            document.querySelector("body").setAttribute("style", "background-color:#fff");
        }
    }
</script>

<style scoped lang='less'>
    .flex-wrap {
        display: flex;
        /*justify-content: space-between;*/
        align-items: center;
        padding: 0 10px;
        padding-right: 15px;

        .left {
            font-size: 14px;
            width: 115px;
            height: 25px;
            display: flex;
            align-items: center;
        }

        .right {
            .select-btn {
                width: 89px;
                height: 25px;
                background-image: linear-gradient(0deg,
                #e1e1e1 0%,
                #f5f5f5 100%);
                border-radius: 3px;
                border: solid 1px #dcdcdc;
                display: flex;
                justify-content: center;
                align-items: center;
            }

        }

        .toast-text {
            font-size: 14px;
            color: #999;
            margin-left: 5px;
            width: 100px;
        }
    }

    .foot-btn {
        padding-bottom: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 32px;
    }

</style>